<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@ include file="../include/commonimport.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Computer Info</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<script type="text/javascript">

	function showInfo(){
		var chart;
	    $(document).ready(function() {   //$(document).ready(function(){})可以简写成$(function(){}); 
	    	var options = { 
	            chart: {
	                renderTo: 'container',
	                type: 'line',
	                marginRight: 130,
	                marginBottom: 25
	            },
	            title: {
	                text: 'Monthly Average Temperature',
	                x: -20 //center
	            },
	            subtitle: {
	                text: 'Source: WorldClimate.com',
	                x: -20
	            },
<%--	            xAxis: {--%>
<%--	                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',--%>
<%--	                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']--%>
<%--	            },--%>
<%--	            yAxis: {--%>
<%--	                title: {--%>
<%--	                    text: 'Temperature (°C)'--%>
<%--	                },--%>
<%--	                plotLines: [{--%>
<%--	                    value: 0,--%>
<%--	                    width: 1,--%>
<%--	                    color: '#808080'--%>
<%--	                }]--%>
<%--	            },--%>
	            tooltip: {
	                formatter: function() {
	                        return '<b>'+ this.series.name +'</b><br/>'+
	                        this.x +': '+ this.y +'°C';
	                }
	            },
	            legend: {
	                layout: 'vertical',
	                align: 'right',
	                verticalAlign: 'top',
	                x: -10,
	                y: 100,
	                borderWidth: 0
	            },
	            series: [{
	                name: 'Tokyo',
	                data: []
<%--	            }, {--%>
<%--	                name: 'New York',--%>
<%--	                data: []--%>
<%--	            }, {--%>
<%--	                name: 'Berlin',--%>
<%--	                data: []--%>
<%--	            }--%>
	            	}]
	   		 }

	    	$.ajax({
	    		   type: "POST",
	    		   url: "<%=basePath%>/info",
	    		   success: function(data){
		    		   var myObject = eval('(' + data + ')');
		    		   var info= myObject.info.split(",");

		    		   var dataArray = new Array();
		    		   for(var i=0; i<info.length; i++) {
			    		   if(info[i] != "null"){
			    		   		dataArray.push(parseFloat(info[i]));
			    		   }else {
			    			   dataArray.push(null);
			    		   }
		    		   }
		    		   options.series[0].data = dataArray;
		    		   chart = new Highcharts.Chart(options);
	    		   }
	    		}); 

			$("#checkbox1").click(function() {
				if(document.getElementById("checkbox1").checked == true){
					chart.addSeries({ name: 'Tokyo',  data: [[1133740800000,71.82],
					                                         [1133827200000,74.05],
					                                         [1133913600000,73.95],
					                                         [1134000000000,74.08],
					                                         [1134086400000,74.33]]});
				}else if(document.getElementById("checkbox1").checked == false){
					 seriesList = chart.series;
					 for(var i=seriesList.length-1;i>=0;i--){
					      if(seriesList[i].name == 'Tokyo'){
					          seriesList[i].remove();
					      }
					  }
				}
					
			});
			$("#checkbox2").click(function() {
				if(document.getElementById("checkbox2").checked == true){
					chart.addSeries({ name: 'New York',  data: [[1135296000000,73.35],
					                                            [1135641600000,74.23],
					                                            [1135728000000,73.57],
					                                            [1135814400000,71.45],
					                                            [1135900800000,71.89]]});
				}else if(document.getElementById("checkbox2").checked == false){
					 seriesList = chart.series;
					 for(var i=seriesList.length-1;i>=0;i--){
					      if(seriesList[i].name == 'New York'){
					          seriesList[i].remove();
					      }
					  }
				}
					
			});
			$("#checkbox3").click(function() {
				if(document.getElementById("checkbox3").checked == true){
					chart.addSeries({ name: 'Berlin',  data: [[1137628800000,79.04],
					                                          [1137715200000,76.09],
					                                          [1137974400000,77.67],
					                                          [1138060800000,76.04],
					                                          [1138147200000,74.20]]});
				}else if(document.getElementById("checkbox3").checked == false){
					 seriesList = chart.series;
					 for(var i=seriesList.length-1;i>=0;i--){
					      if(seriesList[i].name == 'Berlin'){
					          seriesList[i].remove();
					      }
					  }
				}
					
			});

			
	    });
	}


	showInfo();


</script>
		
		
			
		
		
		
  </head>
  
  <body>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div><br>
    <center>
    	<input type="checkbox" id="checkbox1" checked="checked"> Tokyo
		<input type="checkbox" id="checkbox2" > New York  
		<input type="checkbox" id="checkbox3" > Berlin 
	</center>
	http://blog.csdn.net/wan368500/article/details/7722136
  </body>
</html>



